<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <th:block th:include="include :: header('转移户主')" />
  <style>
    .r1 {
      width: 11rem;
      padding-left: 6.5rem;

    }
    .r2 {
      width: 11rem;
      padding-left: 6.5rem;
    }
    .r3 {
      width: 11rem;
      padding-left: 6.5rem;
    }
    .r{
      background-color: rgb(239,243,248);
    }
  </style>
</head>
<meta charset="UTF-8">

<body>
<form id="formId"  class="form-horizontal m" th:object="${baseFamilyInfo}">
  <div id="box" class="main-content">
    <h4 class="form-header h4">户主变更</h4>
    <div class="form-group">
      <label class="col-sm-3 control-label textLength"> 户编号：</label>
      <div class="col-sm-8">
        <label class="control-label"> <p id = "fid"></p></label>
        <!--          <input class="form-control" type="text" th:value="*{fid}" readonly="readonly">-->
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label textLength"> 自然村：</label>
      <div class="col-sm-8">
        <label class="control-label"><p id = "natVillage"></p></label>
        <!--        <input class="form-control" type="text" th:value = "*{natVillage}" readonly="readonly">-->
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label textLength"> 户主姓名：</label>
      <div class="col-sm-8">
        <label class="control-label"> <p id = "oldName"></p></label>
        <!--        <input class="form-control" type="text" th:value="*{name}" readonly="readonly">-->
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-3 control-label is-required textLength">新户主姓名：</label>
      <div class="col-sm-8">
        <select name="newName" id="newName" class="form-control m-b">
          <option>---请选择---</option>
        </select>
      </div>
    </div>
  </div>
  <br><br>
  <div>
    <h4 class="form-header h4">与户主关系变更</h4>
  </div>

  <div class="col-sm-offset-5"></div>
  <div>
    <table id="bootstrap-table" class="table">
      <thead>
      <tr class="r">
        <th scope="col" class="r1">姓名</th>
        <th scope="col" class="r2">与户主关系</th>
        <th scope="col" class="r3">与新户主关系</th>
     </tr>
      </thead>
      <tbody></tbody>
    </table>
       </div>
  <hr>
       <div class="col-sm-offset-5"></div>
     </form>
<div class="row">
  <div class="col-sm-offset-5 col-sm-10">
    <a class="btn btn-primary btn-rounded btn-sm" onclick="submit()">&nbsp;&nbsp;保存&nbsp;&nbsp;</a>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn btn-warning btn-rounded btn-sm" onclick="closePage()">&nbsp;&nbsp;关闭&nbsp;&nbsp;</a>
  </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:src="@{/js/jquery.tmpl.js}"></script>
<script th:inline="javascript">
  var editFlag = [[${@permission.hasPermi('farmer:farmer:edit')}]];
  var removeFlag = [[${@permission.hasPermi('farmer:farmer:remove')}]];
  var prefix = ctx + "system/farmer";

</script>
</body>
</html>

<script th:inline="javascript">
  //展示页面顶部该户基本信息
  var reg1 = new RegExp("\"","g"); // 加'g'，删除字符串里所有的"""
  var fid = '[[${baseFamilyInfo.fid}]]';
  var natVillage = '[[${baseFamilyInfo.natVillage}]]';
  var oldName = '[[${baseFamilyInfo.name}]]';
  document.getElementById("fid").innerHTML = fid.replace(reg1,"");

  switch (natVillage) {
    case "1":
      natVillage = "大六合";
      break;
    case "2":
      natVillage = "后六合";
      break;
    case "3":
      natVillage = "姜家瑶";
      break;
    case "4":
      natVillage = "六家子东";
      break;
    case "5":
      natVillage = "六家子西";
      break;
    case "6":
      natVillage = "龙凤泡";
      break;
    case "7":
      natVillage = "西石头";
      break;
    case "8":
      natVillage = "小舍力";
      break;
  }

  document.getElementById("natVillage").innerHTML = natVillage;
  document.getElementById("oldName").innerHTML = oldName.replace(reg1,"");
</script>

<script th:inline="javascript">
  //新户主姓名下拉框选项
  //根据id查找对象，
  var obj=document.getElementById('newName');
  var s = '[[${member}]]';

  var members = s.split(',');
  var farmers = new Array();

  for (var i=7,j=9,k=11,l=0; i < members.length; i+=24) {
    farmers[l] = {
      id:members[i].slice(5),
      name:members[j].slice(8,-1),
      relationship:members[k].slice(15),
    }

    switch (farmers[l].relationship) {
      case "1":
        farmers[l].relationship="户主";
        break;
      case "2":
        farmers[l].relationship="配偶";
        break;
      case "3":
        farmers[l].relationship="之子";
        break;
      case "4":
        farmers[l].relationship="之女";
        break;
      case "5":
        farmers[l].relationship="之父";
        break;
      case "6":
        farmers[l].relationship="之母";
        break;
      case "7":
        farmers[l].relationship="之儿媳";
        break;
      case "8":
        farmers[l].relationship="之孙子";
        break;
      case "9":
        farmers[l].relationship="之孙女";
        break;
    }

    j+=24;
    k+=24;
    l++;
  }


  //下拉框添加一个选项
  for(var i=0;i<farmers.length;i++){
    obj.options[i+1]=new Option(farmers[i].name,farmers[i].id);
  }

  var str=''
  //第三步： 生成行
  for(var i=0;i<farmers.length;i++){
    //第四步：生成单元格
    str+='<tr>' + '<td>'+farmers[i].name+'</td>' + '<td>'+farmers[i].relationship+'</td>' + '<td>'+
            '<select name="newRelationship" id="newRelationship' + i + '">' +
            '<option>---请选择---</option>'+
            '<option value="1">户主</option>'+
            '<option value="2">配偶</option>'+
            '<option value="3">之子</option>'+
            '<option value="4">之女</option>'+
            '<option value="5">之父</option>'+
            '<option value="6">之母</option>'+
            '<option value="7">之儿媳</option>'+
            '<option value="8">之孙子</option>'+
            '<option value="9">之孙女</option>'+
            '<option value="10">之外孙子</option>'+
            '</select>'+
            '</td>' + '</tr>';
  }
  document.querySelector('tbody').innerHTML=str;

</script>

<script th:inline="javascript">
  function submit(){
    //  写一个ajax，将得到的值放在一个map里，传给后端，后端update相关表，返回success值
    var oldName = document.getElementById("oldName").innerText;
    console.log(oldName);
    var fid = document.getElementById("fid").innerText;
    console.log(fid);
    var newHouseHoldSelect=document.getElementById("newName");
    var index=newHouseHoldSelect.selectedIndex ;
    var newName=newHouseHoldSelect.options[index].text;
    var str = "";

    for (var i=0;i<farmers.length;i++){
      var newRelationshipSelect=document.getElementById("newRelationship" + i);
      var index=newRelationshipSelect.selectedIndex ;
      var newRelationship=newRelationshipSelect.options[index].value;
      farmers[i].relationship = newRelationship;
      str = str + farmers[i].id + "," +  farmers[i].relationship + ",";
    }
    const successTip = async(code)=>{
      $.modal.msgSuccess('保存成功！');
      return new Promise((resolve,reject)=>{
        resolve();
      })
    }

    $.ajax({
      type:"post",
      url:prefix + "/transferSave",
      data:{
        "fid": fid,
        "oldName": oldName,
        "newName": newName,
        "str": str
      },
      success(res){
        if (res.code == 0){
          const d= successTip(res.code)
          d.then(()=>{
            setTimeout(()=>{
              window.parent.location.reload();
            },500)
          })
        }
        else {
          $.modal.msgError('保存失败！');
        }
      }
    })
  }

  function closePage(){
    window.parent.location.reload();
  }
</script>